import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import "./components"  // 导入自定义组件

Window {
    width: 640
    height: 480
    visible: true
    title: "联系人列表"

    // 添加新联系人
    ContactDialog {
        id: addContactDialog
        isEdit: false
        anchors.centerIn: parent
        
        onContactConfirmed: function(name, phone) {
            contactModel.sourceModel.addContact(name, phone)
        }
    }

    // 修改联系人
    ContactDialog {
        id: editContactDialog
        isEdit: true
        anchors.centerIn: parent

        onContactConfirmed: function(name, phone) {
            // 处理编辑联系人的逻辑
            contactModel.editContact(currentEditIndex, name, phone)
        }
    }

    property int currentEditIndex: -1

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10

        // 顶部工具栏
        Rectangle {
            Layout.fillWidth: true
            height: 50
            color: "#f0f0f0"
            radius: 5

            RowLayout {
                anchors.fill: parent
                anchors.margins: 5
                spacing: 10

                CustomTextField {
                    id: searchField
                    Layout.fillWidth: true
                    placeholderText: "搜索联系人..."
                    leftIcon: "qrc:/icons/find.png"
                    onTextChanged: contactModel.filterString = text
                    onRightIconClicked: {
                        text = ""
                        contactModel.filterString = ""
                    }
                }

                IconButton {
                    text: "添加联系人"
                    iconSource: "qrc:/icons/add.png"
                    showBackground: true
                    backgroundColor: "#BBDEFB"
                    onClicked: addContactDialog.open()
                }
            }
        }

        // 联系人列表区域
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#ffffff"
            radius: 5
            
            // 列表和滚动条容器
            Item {
                anchors.fill: parent
                anchors.margins: 1

                // 联系人列表
                ListView {
                    id: contactListView
                    anchors.fill: parent
                    anchors.rightMargin: scrollBar.width
                    model: contactModel
                    spacing: 10
                    clip: true

                    // 启用滚动条绑定
                    ScrollBar.vertical: scrollBar

                    delegate: Rectangle {
                        width: ListView.view.width - scrollBar.width
                        height: 80
                        color: "#f0f0f0"
                        radius: 5

                        // 鼠标悬停效果
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.color = "#e0e0e0"
                                tooltip.visible = true
                            }
                            onExited: {
                                parent.color = "#f0f0f0"
                                tooltip.visible = false
                            }
                        }

                        ToolTip {
                            id: tooltip
                            text: {
                                const num = index + 1;
                                const formattedNum = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                return "第 " + formattedNum + " 行"
                            }
                            delay: 500
                            timeout: 5000
                            visible: false
                        }

                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 10
                            spacing: 15

                            // 首字母头像
                            Rectangle {
                                width: 60
                                height: 60
                                radius: width / 2
                                color: {
                                    const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5", "#9B59B6"]
                                    return colors[firstLetter.charCodeAt(0) % colors.length]
                                }

                                Text {
                                    anchors.centerIn: parent
                                    text: firstLetter
                                    color: "white"
                                    font.pixelSize: 24
                                    font.bold: true
                                }
                            }

                            // 联系人信息
                            ColumnLayout {
                                Layout.fillWidth: true
                                spacing: 5

                                Text {
                                    text: name
                                    font.bold: true
                                    font.pixelSize: 16
                                    Layout.fillWidth: true
                                }

                                Text {
                                    text: phone
                                    color: "#666666"
                                    font.pixelSize: 14
                                    Layout.fillWidth: true
                                }
                            }

                            // 操作按钮
                            RowLayout {
                                spacing: 10

                                // 编辑按钮
                                IconButton {
                                    iconSource: "qrc:/icons/edit.png"
                                    onClicked: {
                                        currentEditIndex = index
                                        editContactDialog.currentName = name
                                        editContactDialog.currentPhone = phone
                                        editContactDialog.open()
                                    }
                                }

                                // 删除按钮
                                IconButton {
                                    iconSource: "qrc:/icons/delete.png"
                                    onClicked: contactModel.removeContact(index)
                                }
                            }
                        }
                    }
                }

                // 滚动条
                ScrollBar {
                    id: scrollBar
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    active: true
                    interactive: true
                    orientation: Qt.Vertical
                }
            }
        }
    }
}
